.header {
    min-width: 890px;
    height: 48px;
    background: #fff;
    box-shadow: 0px 1px 4px #eee;

    .active {
        color: #1890ff !important;
        &::before {
            border-bottom: 2px solid #1890ff;
        }
    }

    .logo {
        width: 40px;
        height: 40px;
        margin-left: 40px;
        margin-top: 3px;
    }
    .search {
        display: flex;
        flex-direction: row-reverse; 
        padding-top: 7px;
    }

    .name-wrap {
        text-align: center;
        height: 42px;
        line-height: 42px;
    }

    .loginAndReg {
        display: flex;
        flex-direction: row-reverse;
        margin-right: 28px;
        margin-top: 8px;
    
        .split {
            &::after {
                content: '';
                display: inline-block;
                height: 25px;
                margin-top: 4px;
                border-right: 1px solid #ccc;
            }
        }  
    }

    :global {
        .ant-btn-text {
            &:hover {
                color: #40a9ff;
                background-color: #fff;
            }
            &:focus {
                background-color: #fff;
            }
        }
    }  
}